<template lang="">
<div>
		<!--表单区域-->
		<div class="login_container">
			<div class="login_box">
				<!--表单区域-->
				<el-form label-width="0px" class="login_form" ref="onloginForm" :model="loginForm" :rules="loginrules">
					<el-form-item prop="username">
						<el-input prefix-icon="iconfont icon-bianzubeifen3" v-model="loginForm.username"
							placeholder="管理员账号"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input prefix-icon="iconfont icon-bianzubeifen4" v-model="loginForm.password" show-password
							placeholder="密码">
						</el-input>
					</el-form-item>
					
					<el-form-item class="btns">
						<el-button type="primary" @click="submitForm(onloginForm)">登录</el-button>
						<el-button type="info" @click="resetForm">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
    import axios from 'axios'
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: ''
				},
				userDatas:{

				},
				loginrules: {
					// 表单验证规则配置 required 代表是必填项！ 
					// message 就是他的提示消息！
					// trigger 代表触发验证的机制 blur 就是当鼠标失去焦点的时候触发校验！
					// min max 也就是长度的限制不能少于和不能大于的字符！
					username: [{
							required: true,
							message: '管理员账号不能为空！',
							trigger: 'blur'
						}
					],
					password: [{
						required: true,
						message: '密码不能为空！',
						trigger: 'blur'
					}]
				}
			}
		},
		methods:{
			submitForm(){
				console.log("提交")
				let userdata={
					username:this.loginForm.username,
					password:this.loginForm.password
				}
				if(userdata.username===''||userdata.password===''){
					alert("账号或密码不能为空！")
				}else{
                    axios.post('http://localhost:1000/adminlogin',userdata).then(resule=>{
                    if(resule.data.code==0){
						this.userDatas=resule.data.data
						// console.table(this.userDatas)
						localStorage.setItem('admintoken',JSON.stringify(resule.data.data))
						this.$router.replace('/admin')
						setTimeout(() => {
							location.reload();
						}, 200);
					}else{
                    console.log(resule.data)
					alert(resule.data.msg)
					}
					
				}).catch(err=>{
					console.log(err)
					alert(err)
				})
				}
                
				


			},
			resetForm(){
                this.loginForm.username=''
				this.loginForm.password=''
				console.log("重置")
	
			},
			
		}
	}
</script>

<style>
h1 {
  text-align: center;
  color: white;
}

.login_container {
  width: 100%;
  height: 100%;
  background: #2b4b6b;
}

.login_box {
  width: 450px;
  height: 250px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    padding: 10px;
    width: 130px;
    height: 130;
    border: 1px solid #eee;
    border-radius: 50%;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #eee;
    }
  }
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>